import { PureComponent } from 'react'
import { connect } from 'dva';
import { DatePicker, Icon, Menu, Dropdown, Tooltip} from 'antd';
import styles from './dataScan.less'
const { RangePicker } = DatePicker;
let totalTime = ''
function getDay(day){
  var today = new Date();
  var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
  today.setTime(targetday_milliseconds); //注意，这行是关键代码
  var tYear = today.getFullYear();
  var tMonth = today.getMonth();
  var tDate = today.getDate();
  tMonth = doHandleMonth(tMonth + 1);
  tDate = doHandleMonth(tDate);
  return tYear+"-"+tMonth+"-"+tDate;
    
}
function doHandleMonth(month){
  var m = month;
  if(month.toString().length === 1){
   　m = "0" + month;
  }
  return m;
}
function getToday () {
  var d = new Date();
  let m = d.getMonth() + 1
  if(m >=10){
    m = d.getMonth() + 1
  }else{
    m = `0${d.getMonth() + 1}`
  }
  return d.getFullYear() + "-" + m + "-" + d.getDate();
}
let Now = getToday()
let SevPast = getDay(-7)
totalTime = `${SevPast}   ~  ${Now}`
@connect(({ loading, example = {} }) => ({    //其中global={}表示global中的所有state
  dataList: example.dataList,   //读取原有的state，即models中的global.js文件中的weather
  // loading: loading.effects['example/getPreDataList'],   //这个statu使用models中的chart.js文件中的fetch方法异步获取
}))

export default class DataScan extends PureComponent {
  params = {
    startDate: SevPast,
    endDate: Now,
  }
  
  componentDidMount() {
    // const { dispatch } = this.props
    // dispatch({
    //   type: 'example/getPreDataList',
    //   payload: this.params
    // })
  }
  changeTime = (value, dateString) => {
    this.params.startDate = dateString[0]
    this.params.endDate = dateString[1]
    totalTime = `${dateString[0]}  ~ ${dateString[1]}`
    const { dispatch } = this.props
    dispatch({
      type: 'example/getPreDataList',
      payload: this.params
    })
  }
  
  render() {
    const { dataList} = this.props
    let whiteNumFirst = ''
    if(dataList.allCustomers && dataList.allCustomers.length > 10){
      whiteNumFirst = `${dataList.allCustomers.substr(0, 10)  }...`
    }else{
      whiteNumFirst = dataList.allCustomers
    }
    let whiteNumO = ''
    if(dataList.loginCustomers && dataList.loginCustomers.length > 10){
      whiteNumO = `${dataList.loginCustomers.substr(0, 10)  }...`
    }else{
      whiteNumO = dataList.loginCustomers
    }
    let whiteNumS = ''
    if(dataList.registrations && dataList.registrations.length > 10){
      whiteNumS = `${dataList.registrations.substr(0, 10)  }...`
    }else{
      whiteNumS = dataList.registrations
    }
    let whiteNumT = ''
    if(dataList.orders && dataList.orders.length > 10){
      whiteNumT = `${dataList.orders.substr(0, 10)  }...`
    }else{
      whiteNumT = dataList.orders
    }
    let whiteNumF = ''
    if(dataList.createExpresses && dataList.createExpresses.length > 10){
      whiteNumF = `${dataList.createExpresses.substr(0, 10)  }...`
    }else{
      whiteNumF = dataList.createExpresses
    }
    let whiteNumFine = ''
    if(dataList.paymentExpresses && dataList.paymentExpresses.length > 10){
      whiteNumFine = `${dataList.paymentExpresses.substr(0, 10)  }...`
    }else{
      whiteNumFine = dataList.paymentExpresses
    }
    let whiteNumSe = ''
    if(dataList.gmv && dataList.gmv.length > 10){
      whiteNumSe = `${dataList.gmv.substr(0, 10)  }...`
    }else{
      whiteNumSe = dataList.gmv
    }
    let whiteNumE = ''
    if(dataList.noinformations && dataList.noinformations.length > 10){
      whiteNumE = `${dataList.noinformations.substr(0, 10)  }...`
    }else{
      whiteNumE = dataList.noinformations
    }
    const dropMenu = (
      <Menu style={{width: '256px',height: '99px'}}>
        <Menu.Item>
          <div className={styles.dropDownStyle}>
            <div className={styles.dropDownTop}>
              累计用户
            </div>
            <div className={styles.dropDownBottom}>
             {dataList.allCustomersDesc}
            </div>
          </div>
        </Menu.Item>
      </Menu>
    )
    const dropMenuS = (
      <Menu style={{width: '256px',height: '99px'}}>
        <Menu.Item>
          <div className={styles.dropDownStyle}>
            <div className={styles.dropDownTop}>
              全站日活
            </div>
            <div className={styles.dropDownBottom}>
             {dataList.loginCustomersDesc}
            </div>
          </div>
        </Menu.Item>
      </Menu>
    )
    const dropMenuT = (
      <Menu style={{width: '256px',height: '99px'}}>
        <Menu.Item>
          <div className={styles.dropDownStyle}>
            <div className={styles.dropDownTop}>
              注册用户
            </div>
            <div className={styles.dropDownBottom}>
             {dataList.registrationsDesc}
            </div>
          </div>
        </Menu.Item>
      </Menu>
    )
    const dropMenuF = (
      <Menu style={{width: '256px',height: '99px'}}>
        <Menu.Item>
          <div className={styles.dropDownStyle}>
            <div className={styles.dropDownTop}>
              下单人数
            </div>
            <div className={styles.dropDownBottom}>
             {dataList.ordersDesc}
            </div>
          </div>
        </Menu.Item>
      </Menu>
    )
    const dropMenuFive = (
      <Menu style={{width: '256px',height: '99px'}}>
        <Menu.Item>
          <div className={styles.dropDownStyle}>
            <div className={styles.dropDownTop}>
              创建订单数
            </div>
            <div className={styles.dropDownBottom}>
             {dataList.createExpressesDesc}
            </div>
          </div>
        </Menu.Item>
      </Menu>
    )
    const dropMenuSix = (
      <Menu style={{width: '256px',height: '99px'}}>
        <Menu.Item>
          <div className={styles.dropDownStyle}>
            <div className={styles.dropDownTop}>
              付款订单数
            </div>
            <div className={styles.dropDownBottom}>
             {dataList.paymentExpressesDesc}
            </div>
          </div>
        </Menu.Item>
      </Menu>
    )
    const dropMenuSeven= (
      <Menu style={{width: '256px',height: '99px'}}>
        <Menu.Item>
          <div className={styles.dropDownStyle}>
            <div className={styles.dropDownTop}>
              GMV
            </div>
            <div className={styles.dropDownBottom}>
             {dataList.gmvDesc}
            </div>
          </div>
        </Menu.Item>
      </Menu>
    )
    const dropMenuE= (
      <Menu style={{width: '256px',height: '99px'}}>
        <Menu.Item>
          <div className={styles.dropDownStyle}>
            <div className={styles.dropDownTop}>
              无主件（未下单）
            </div>
            <div className={styles.dropDownBottom}>
             {dataList.noinformationsDesc}
            </div>
          </div>
        </Menu.Item>
      </Menu>
    )
  
    return (
      <div className={styles.dataScanBox} style={{marginTop: '24px' }}>
        <div className={styles.scanContext}>
          <span style={{lineHeight: '56px'}}>数据总览</span>
          <RangePicker className={styles.datePicker}  
          format="YYYY-MM-DD"
          placeholder={['开始时间', '结束时间']}
          onChange={this.changeTime}
          />
        </div>
        <div className={styles.contextList}>
          <ul className={styles.contextSingle}>
            <li>
              <div className={styles.contextTop}>
                <span>累计用户</span>
                <Dropdown overlay={dropMenu} placement="topLeft">
                  <Icon type="info-circle" />
                </Dropdown>
              </div>
              <div className={styles.contextBottom} style={{marginTop: '35px'}}>
                <Tooltip title={dataList.allCustomers}>
                  {whiteNumFirst}
                </Tooltip>
              </div>
            </li>
            <li>
              <div className={styles.contextTop}>
                <span>全站日活</span>
                <Dropdown overlay={dropMenuS} placement="topLeft">
                  <Icon type="info-circle" />
                </Dropdown>
              </div>
              <div className={styles.contextMiddle}>
                {totalTime}
              </div>
              <div className={styles.contextBottom}>
                <Tooltip title={dataList.loginCustomers}>
                  {whiteNumO}
                </Tooltip>
              </div>
            </li>
            <li>
              <div className={styles.contextTop}>
                <span>注册用户</span>
                <Dropdown overlay={dropMenuT} placement="topLeft">
                  <Icon type="info-circle" />
                </Dropdown>
              </div>
              <div className={styles.contextMiddle}>
                {totalTime}
              </div>
              <div className={styles.contextBottom}>
                <Tooltip title={dataList.registrations}>
                  {whiteNumS}
                </Tooltip>
              </div>
            </li>
            <li>
              <div className={styles.contextTop}>
                <span>下单人数</span>
                <Dropdown overlay={dropMenuF} placement="topLeft">
                  <Icon type="info-circle" />
                </Dropdown>
              </div>
              <div className={styles.contextMiddle}>
               {totalTime}
              </div>
              <div className={styles.contextBottom}>
                <Tooltip title={dataList.orders}>
                  {whiteNumT}
                </Tooltip>
              </div>
            </li>
          </ul>
          <ul className={styles.contextSingle}>
            <li>
              <div className={styles.contextTop}>
                <span>创建订单数</span>
                <Dropdown overlay={dropMenuFive} placement="topLeft">
                  <Icon type="info-circle" />
                </Dropdown>
              </div>
              <div className={styles.contextMiddle}>
               {totalTime}
              </div>
              <div className={styles.contextBottom}>
                <Tooltip title={dataList.createExpresses}>
                  {whiteNumF}
                </Tooltip>
              </div>
            </li>
            <li>
              <div className={styles.contextTop}>
                <span>付款订单数</span>
                <Dropdown overlay={dropMenuSix} placement="topLeft">
                  <Icon type="info-circle" />
                </Dropdown>
              </div>
              <div className={styles.contextMiddle}>
               {totalTime}
              </div>
              <div className={styles.contextBottom}>
                <Tooltip title={dataList.paymentExpresses}>
                  {whiteNumFine}
                </Tooltip>
              </div>
            </li>
            <li>
              <div className={styles.contextTop}>
                <span>GMV</span>
                <Dropdown overlay={dropMenuSeven} placement="topLeft">
                  <Icon type="info-circle" />
                </Dropdown>
              </div>
              <div className={styles.contextMiddle}>
               {totalTime}
              </div>
              <div className={styles.contextBottom}>
                <Tooltip title={dataList.gmv}>
                  {whiteNumSe}
                </Tooltip>
              </div>
            </li>
            <li>
              <div className={styles.contextTop}>
                <span>无主件（未下单）</span>
                <Dropdown overlay={dropMenuE} placement="topLeft">
                  <Icon type="info-circle" />
                </Dropdown>
              </div>
              <div className={styles.contextMiddle}>
                {totalTime}               
              </div>
              <div className={styles.contextBottom}>
                <Tooltip title={dataList.noinformations}>
                  {whiteNumE}
                </Tooltip>
              </div>
            </li>
          </ul>
        </div>
      </div>
    )
  }
}